<template>
    <div class="AfterSale">
      <div class="demo-nav">
        <div class="demo-nav__title">售后/退款</div>
        <svg viewBox="0 0 1000 1000" class="demo-nav__back" @click="toBack">
          <path fill-rule="evenodd" fill="#969799" d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"></path>
        </svg>
      </div>
      <div class="AfterSale-demo" v-for="item in afterSaleVoList">
        <van-row>
          <van-col span="4"><van-icon name="shop-o" size="24"/></van-col>
          <van-col span="9" style="text-align: left;margin-top: 0.2rem">{{item.shopsName}} <van-icon name="arrow" size="13"/></van-col>
          <van-col span="10" style="text-align: right">
            {{item.orderStatus==1?'待付款':(item.orderStatus==2?'待发货':(item.orderStatus==3?'待收货':(item.orderStatus==4?'已收货':(item.orderStatus==5?'交易取消':
            (item.orderStatus==6?'删除订单':(item.orderStatus==7?'取消订单':'退货'))))))}}
          </van-col>
        </van-row>
        <van-divider />
        <van-row>
          <van-col span="7"><van-image width="4rem" height="4rem" fit="cover" :src="item.picUrl"/></van-col>
          <van-col span="16" style="text-align: left">
            <p style="padding-bottom: 0.5rem">{{item.productName}}</p>
            <van-row>
              <van-col span="12" style="text-align: left;font-size: 0.6rem">{{item.labelName}},{{item.labelUnit}}</van-col>
              <van-col span="10" style="text-align: right">￥{{item.labelPrice}} × {{item.productCnt}}</van-col>
            </van-row>
          </van-col>
        </van-row>
        <P style="font-size: 1.1rem;text-align: right;padding: 0.8rem 2rem 0 0">共计{{item.productCnt}}件商品 合计：￥{{item.paymentMoney}}</P>
        <div align="right" style="padding: 0.5rem 1.8rem 0 0">
          <van-button color="" plain round style="height: 2rem;width: 7rem" @click="tpApplySale(item)">申请售后</van-button>
          <van-button color="#ec8b1b" plain round style="height: 2rem;width: 4.5rem" v-if="item.orderStatus==4 && item.commentStatus==0" @click="evaluateOrderVo(item)">评价</van-button>
        </div>
      </div>
    </div>
</template>

<script>
  import { selectAfterSaleVo } from '@/api/commodity/order_master.js';
  import { Toast } from 'vant';
  export default {
    name: "AfterSale",
    data(){
      return{
        a :3,
        //订单售后查询参数
        afterSaleVo:{
          customerId:'',
        },
        //订单售后的集合
        afterSaleVoList:[],

      }
    },
    created() {
      this.getSelectAfterSaleVo();
    },
    methods:{
      toBack(){
        this.$router.go(-1);//返回上一层
      },
      tpApplySale(list){
        sessionStorage.setItem('list',JSON.stringify(list));
        this.$router.push({path:"/ApplySale"});
      },
      //订单售后查询
      getSelectAfterSaleVo(){
        selectAfterSaleVo(this.afterSaleVo).then((res)=>{
            if(res.data.code==200){
              this.afterSaleVoList = res.data.data;
            }else {
              Toast.fail(res.data.msg);
            }
            console.log(res)
          })
      },
      //去评价
      evaluateOrderVo(list){
        sessionStorage.setItem('list',JSON.stringify(list));
        this.$router.push({ path:'/EvaluateOrder'});
      },

    }
  }
</script>

<style scoped>
  .demo-nav{
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    height: 56px;
    background-color: #fff;
    font-size: 1.1rem;
  }
  .demo-nav__back{
    position: absolute;
    top: 16px;
    left: 16px;
    width: 24px;
    height: 24px;
    cursor: pointer;
  }
  .AfterSale-demo{
    padding: 0.5rem;
    border: 1px solid #ebedf0;
    border-radius: 1rem;
    margin: 0.5rem 0;
  }
</style>
